<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单</title>
</head>
<style>
    form {
        width: 800px;
        height: 500px;
        /* background-color: gold; */
        margin: 0 auto;
    }
    h1 {
        width: 250px;
        color: aqua;
        margin: 0 auto;
        font-size: 50px;
        font-weight: 400;
        text-align: center;
        border-bottom: 10px solid aqua;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    div {
        display: none;
        width: 70%;
        margin-left: 17%;
        margin-right: 13%;
        background-color: yellow;
        font-size: 45px;
        padding: 15px;
        text-align: center;
        color: green;
        font-weight: bolder;
        border: 1px solid brown;
    }
    h2 {
        width: 14%;
        font-size: 35px;
        letter-spacing: 10px;
        margin-left: 1%;
        margin-right: 1%;
        font-weight: 500;
    }
    h3 {
        display: none;
        position: relative;
        width: 18%;
        font-size: 25px;
        font-weight: 500;
    }
    input[type="text"] {
        position: relative;
        width: 75%;
        top: -78px;
        left: 121px;
        height: 60px;
        /* background-color: blue; */
        border: 1px solid brown;
        font-size: 18px;
        padding-left: 20px;
    }
    input[type="password"] {
        position: relative;
        width: 75%;
        top: -78px;
        left: 121px;
        height: 60px;
        /* background-color: blue; */
        border: 1px solid brown;
        font-size: 18px;
        padding-left: 20px;
    }
    button {
        position: relative;
        border: none;
        border-radius: 5px;
        width: 45%;
        top: -196px;
        left: 418px;
        height: 60px;
        /* background-color: blue; */
        background-color: greenyellow;
        font-size: 20px;
        color: white;
        padding-left: 25px;
        letter-spacing: 10px;
    }
</style>
<body>
    <form>
        <h1>登录</h1>
        <div>登录成功!</div>
        <h2>账号:</h2>
        <input type="text" placeholder="用户名" name="user">
        <h2 style="margin-top: -40px;">密码:</h2>
        <input type="password" placeholder="密码" name="pwd">
    </form>
    <button>登录</button>
    <h3 style="left: 1051px;top:-454px;color: red;">用户名不能为空</h3>
    <h3 style="left: 1051px;top:-416px;color: red;">密码不能为空</h3>
    <script>
        var user = document.getElementsByName('user');
        var pwd = document.getElementsByName('pwd');
        var button = document.querySelector('button');
        // console.log(button);
        button.onclick = function() {
            const form = document.getElementsByTagName('form')[0]; // 通过id选择器获取表单元素
            const formData = new FormData(form); // 创建FormData对象并传入表单元素作为参数
            // console.log(formData); // 输出FormData对象
            var values = [...formData.values()]
            // console.log(values);
            user.value = values[0];
            pwd.value = values[1];
            if(user.value == '' && pwd.value != '') {
                document.getElementsByTagName('h3')[0].style.display = 'block';
        }
            else if(pwd.value == '' && user.value != '') {
                document.getElementsByTagName('h3')[1].style.display = 'block';
                document.getElementsByTagName('h3')[1].style.top = '-355px';
        }
            else if(user.value != '' && pwd.value != '' && user.value == 'mr' && pwd.value == 'mrsoft'){
                document.getElementsByTagName('div')[0].style.display = 'block';
                document.getElementsByTagName('button')[0].style.top = '-100px';
        }
            else if(user.value !== '' && pwd.value !== '' && (user.value !=='mr' || pwd.value !== 'mrsoft')){
                document.getElementsByTagName('div')[0].style.display = 'block';
                document.getElementsByTagName('div')[0].innerHTML = '用户名或密码不正确!';
                document.getElementsByTagName('button')[0].style.top = '-100px';
        }
        else {
                // console.log(document.getElementsByTagName('h3')[0]);
                document.getElementsByTagName('h3')[0].style.display = 'block';
                document.getElementsByTagName('h3')[1].style.display = 'block';
        }
    }
    </script>
</body>
</html>